You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
3.8 KiB
91 lines
3.8 KiB
"use client";
|
|
|
|
import React, { useMemo } from "react";
|
|
import { QuestionFile } from "@/components/Componentes/question-file";
|
|
import { QuestionAnswersProvider } from "@/components/Componentes/question-answer-storage";
|
|
import type { QuestionField } from "@/lib/schema-adapter";
|
|
import { I18nProvider } from "@/translations/provider";
|
|
|
|
const mockQuestion: QuestionField = {
|
|
id: "documents_verification.other_supporting_documents",
|
|
title: "Other Supporting Documents",
|
|
type: "file",
|
|
order: 1,
|
|
required: false,
|
|
baseRequired: false,
|
|
isVisible: true,
|
|
description: "",
|
|
tooltip: "Supporting documents for identity verification",
|
|
extras: {
|
|
placeHolder: "",
|
|
range: [0, 0],
|
|
options: [".pdf", ".jpg", ".jpeg", ".png"],
|
|
},
|
|
options: [],
|
|
};
|
|
|
|
export default function PreviewUploadPage() {
|
|
return (
|
|
<I18nProvider locale="en">
|
|
<QuestionAnswersProvider slug="preview" questions={[mockQuestion]} locale="en">
|
|
<div className="mx-auto flex min-h-screen max-w-[430px] flex-col bg-[#FFF7F7] px-4 py-3 font-sans antialiased text-[#111111]">
|
|
{/* Top Bar */}
|
|
<div className="relative flex items-center rounded-2xl bg-gradient-to-r from-[#F0445B] to-[#F87171] px-4 py-3 text-white shadow-sm">
|
|
<button type="button" className="flex h-8 w-8 items-center justify-center rounded-full bg-white/20 text-white">
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M19 12H5M12 19l-7-7 7-7" />
|
|
</svg>
|
|
</button>
|
|
<span className="ml-3 truncate font-bold text-sm">
|
|
Document Upload, Identity Verific...
|
|
</span>
|
|
</div>
|
|
|
|
{/* Progress Indicator */}
|
|
<div className="mt-4 flex flex-col gap-1.5 px-1">
|
|
<div className="flex justify-between text-[11px] font-medium text-gray-500">
|
|
<span>fields to complete</span>
|
|
<span>4 / 4</span>
|
|
</div>
|
|
<div className="h-1.5 w-full overflow-hidden rounded-full bg-gray-200">
|
|
<div className="h-full w-full rounded-full bg-[#F0445B]" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Advisor Badge */}
|
|
<div className="mt-6 flex justify-center">
|
|
<div className="inline-flex items-center gap-1.5 rounded-full border border-[#FED7D7] bg-[#FFF5F5] px-3 py-1 text-xs font-semibold text-[#E53E3E]">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
|
<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
|
|
<line x1="1" y1="1" x2="23" y2="23" />
|
|
</svg>
|
|
<span>Private (Advisors Only)</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Question Component */}
|
|
<div className="mt-4">
|
|
<QuestionFile question={mockQuestion} debugProgress={100} />
|
|
</div>
|
|
|
|
{/* Spacer */}
|
|
<div className="flex-1" />
|
|
|
|
{/* Bottom Button */}
|
|
<div className="mt-8 mb-4">
|
|
<button
|
|
type="button"
|
|
className="flex h-12 w-full items-center justify-center rounded-2xl bg-[#F0445B] text-white shadow-md active:opacity-90"
|
|
>
|
|
<div className="flex items-center gap-1.5">
|
|
<div className="h-2 w-2 rounded-full bg-white animate-pulse" />
|
|
<div className="h-2 w-2 rounded-full bg-white animate-pulse delay-100" />
|
|
<div className="h-2 w-2 rounded-full bg-white animate-pulse delay-200" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</QuestionAnswersProvider>
|
|
</I18nProvider>
|
|
);
|
|
}
|